<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <Row :gutter="10">
          <Button type="primary"
                  style="float:right;width:90px;height: 34px;font-size: 14px; margin-left:10px"
                  @click="exportData">导出</Button>
          <Button type="primary"
                  style="float:right;width:90px;height: 34px;font-size: 14px;"
                  @click="addContract">添加</Button>
          <div style="float:right;margin-bottom: 10px;">
            <Input v-model="filter.company"
                   @on-search="search"
                   search
                   enter-button="查询"
                   placeholder="请输入合同单位"
                   style="width:180px; margin-right: 10px;float: right;top:0;font-size: 14px;" />
          </div>
          <div style="float:right;margin-bottom: 10px;">
            <Input v-model="filter.name"
                   @on-search="search"
                   search
                   enter-button="查询"
                   placeholder="请输入合同名称"
                   style="width:180px; margin-right: 10px;float: right;top:0;font-size: 14px;" />
          </div>
        </Row>
        <Row class="margin-top-10 table_pattern">
          <Table :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="show_add"
           :title="title"
           width="700px"
           :mask-closable="false"
           class="goods_modal">
      <Form :model="formValidate"
            :label-width="130"
            ref="formValidate"
            style='margin-left:60px'>
        <FormItem label="合同名称"
                  prop="name">
          <Input v-model="formValidate.name"
                 style="width: 370px;"
                 placeholder='请输入合同名称' />
        </FormItem>
        <FormItem label="合同附件"
                  prop="file">
          <div class="clearfix live_cover">
            <div>
              <template>
                <div v-model="formValidate.file">
                  {{formValidate.file}}
                </div>
              </template>
            </div>
            <Upload ref="upload"
                    :max-size="20480"
                    :show-upload-list="false"
                    action="https://up.qiniup.com"
                    :on-format-error="handleFormatError"
                    :before-upload="handleBeforeUpload"
                    :on-progress="handleProgress"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :data="{token:upload_token}"
                    style="float: left;">
              <Button style="width:80px;height:30px;background:rgba(248,249,250,1);border:1px solid rgba(232,233,237,1);border-radius:2px;">上传附件</Button>
              <span style="color:#f00;margin-left:20px; margin-top: 10px;">建议小于5M</span>
            </Upload>
          </div>
        </FormItem>
        <FormItem label="合同简介"
                  prop="desc">
          <Input v-model="formValidate.desc"
                 type="textarea"
                 :rows="4"
                 placeholder="合同简介"
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="合同开始日期"
                  class="label_required clearfix">
          <DatePicker type="date"
                      v-model="start_time"
                      format="yyyy-MM-dd"
                      placeholder="选择合同开始日期"
                      style="width: 300px;float: left;"></DatePicker>
        </FormItem>
        <FormItem label="合同结束日期"
                  class="label_required clearfix">
          <DatePicker type="date"
                      v-model="end_time"
                      format="yyyy-MM-dd"
                      placeholder="选择合同结束日期"
                      style="width: 300px;float: left;"></DatePicker>
        </FormItem>
        <FormItem label="合同金额"
                  prop="money">
          <Input v-model="formValidate.money"
                 style="width: 370px;"
                 placeholder='请输入合同金额' />
        </FormItem>
        <FormItem label="合同单位"
                  prop="company">
          <Input v-model="formValidate.company"
                 style="width: 370px;"
                 placeholder='请输入合同单位' />
        </FormItem>
        <FormItem label="合同备注"
                  prop="remark">
          <Input v-model="formValidate.remark"
                 type="textarea"
                 :rows="4"
                 placeholder="合同备注"
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="是否提示"
                  prop="is_notice">
          <RadioGroup v-model="formValidate.is_notice">
            <Radio label="1">是</Radio>
            <Radio label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="选择手机号"
                  prop="phones"
                  v-if='formValidate.is_notice == 1'>
          <div class="auth_select">
            <Checkbox-group v-model="phone_selected"
                            @on-change="selectPhone">
              <Checkbox v-for="(item,key) in phone_list"
                        :key="key"
                        :label="item.username"
                        class="auth_check">
                <span>{{item.username}}({{item.name}})</span>
              </Checkbox>
            </Checkbox-group>
          </div>
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click="submit()"
                  style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:100px">提交</Button>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="show_contract_info"
           title="合同详情"
           width="600px"
           :mask-closable="false"
           class="public_modal_header edit_modal show_audit">
      <div id="contractDetail"
           style="padding: 20px 0; color:#000; font-size:16px">
        <div style="height:40px; margin-top:10px;display:flex;justify-content:center;align-items:center">
          <div style="float:left">
            <img src="https://qiniu.mocomedia.cn/Fif60241WY_lWg3AySaE0uCH2fXx.jpg"
                 style="border-radius:16px; width:32px; height:32px">
          </div>
          <div style="margin-top:2px;margin-left:10px;float:left;font-size:20px;font-weight:bolder">常电通用电需求全流程管理系统</div>
        </div>
        <div style="clear: both"></div>
        <div style="margin-top: 5px; padding-left: 50px;">
          <p style="margin-top:5px;margin-left:10px;font-weight:bolder">合同名称</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.name}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同附件</p>
          <p style="margin-top:5px;margin-left:10px"><a :href="formValidate.file">{{formValidate.file}}</a></p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同描述</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.desc}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同开始日期</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.date_start}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同结束日期</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.date_end}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同金额</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.money}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同单位</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.company}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同备注</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.remark}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">是否提醒</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.is_notice ? '是' : '否'}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">提醒手机号</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.phones}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">创建日期</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.created_time}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">更新日期</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate.updated_time}}</p>
        </div>
      </div>
      <Button type="primary"
              v-print="'#contractDetail'"
              style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:255px; margin-top:13px; margin-bottom:20px">打印</Button>
    </Modal>
  </div>
</template>

<script>
import config from '@/config'
import Time from '@/tool/Time'
import { getQiniu, contractList, editContract, changeContractStatus, getAdminPhoneList } from '@/api/main'
export default {
  data () {
    return {
      upload_token: '',
      qiniu_url: '',
      visible: false,
      show_add: false,
      show_contract_info: false,
      title: '创建合同',
      pagenation: {},
      start_time: '',
      end_time: '',
      phone_list: [
        {
          id: 1,
          name: '小王',
          phone: '13915011111'
        },
        {
          id: 2,
          name: '小李',
          phone: '13915012222'
        },
        {
          id: 3,
          name: '小张',
          phone: '13915013333'
        },
      ],
      phone_selecte: [],
      phone_selected: [],
      filter: {
        page: 0,
        page_size: 20,
        name: '',
        company: ''
      },
      list: [],
      formValidate: {
        name: '',
        file: '',
        desc: '',
        start: 0,
        end: 0,
        money: 0,
        company: '',
        remark: '',
        is_notice: '1',
        phones: '',
      },
      columns: [
        {
          key: 'name',
          align: 'center',
          title: '合同名称',
        },
        {
          key: 'desc',
          align: 'center',
          title: '合同描述',
        },
        {
          key: 'date_start',
          align: 'center',
          title: '开始日期',
        },
        {
          key: 'date_end',
          align: 'center',
          title: '结束日期',
        },
        {
          key: 'money',
          align: 'center',
          title: '合同金额',
        },
        {
          key: 'company',
          align: 'center',
          title: '合同单位',
        },
        {
          key: 'remark',
          align: 'center',
          title: '合同备注',
        },
        {
          key: 'created_time',
          align: 'center',
          title: '创建时间',
        },
        {
          key: 'updated_time',
          align: 'center',
          title: '更新时间',
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                  },
                  on: {
                    click: () => {
                      this.contractInfo(params.row)
                    },
                  },
                },
                '详情',
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                  },
                  on: {
                    click: () => {
                      this.editContract(params.row)
                    },
                  },
                },
                '编辑',
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除该合同吗?',
                    transfer: true,
                  },
                  on: {
                    'on-ok': () => {
                      let obj = {}
                      obj.id = params.row.id
                      obj.status = -1
                      changeContractStatus(obj).then(res => {
                        if (res.code === 0) {
                          let _this = this
                          this.$Message.success('删除成功')
                          let item = _this.list.find(item => {
                            return item.id === params.row.id
                          })
                          let index = _this.list.indexOf(item)
                          _this.list.splice(index, 1)
                        } else {
                          this.$Message.success(res.text)
                        }
                      })
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        border: 0,
                        background: 'transparent',
                        fontSize: '14px',
                        color: '#377EEF'
                      },
                      props: {
                        placement: 'top',
                        size: 'small',
                      },
                    },
                    '删除',
                  ),
                ],
              )
            ])
          },
        },
      ],
    }
  },
  watch: {
    'start_time': function () {
      this.formValidate.start = Time.dateToTimestamp(this.start_time)
    },
    'end_time': function () {
      this.formValidate.end = Time.dateToTimestamp(this.end_time)
    },
  },
  methods: {
    selectPhone (data) {
      this.phone_selecte = data;
      //console.log(data)
    },
    change: function (page) {
      this.filter.page = page - 1
      this.contractList()
    },
    search: function () {
      this.filter.page = 0
      this.contractList()
    },
    addContract () {
      this.title = '新增合同'
      this.handleReset('formValidate')
      this.formValidate.id = 0
      this.end_time = ''
      this.start_time = ''
      this.phone_selected = []
      this.show_add = true
    },
    editContract (obj) {
      this.title = '编辑合同'
      this.formValidate = Object.assign({}, obj)
      this.start_time = obj.date_start
      this.end_time = obj.date_end
      this.formValidate.is_notice = this.formValidate.is_notice.toString()
      this.phone_selected = obj.phone_arr
      this.phone_selecte = obj.phone_arr
      this.show_add = true
    },
    contractInfo (obj) {
      this.formValidate = Object.assign({}, obj)
      this.show_contract_info = true
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    submit () {
      let _this = this
      if (_this.formValidate.name == '') {
        this.$Message.error('请输入合同名称'); return;
      }
      if (_this.formValidate.file == '') {
        this.$Message.error('请上传附件'); return;
      }
      if (_this.formValidate.desc == '') {
        this.$Message.error('请输入合同描述'); return;
      }
      if (_this.formValidate.start == 0) {
        this.$Message.error('请选择合同开始日期'); return;
      }
      if (_this.formValidate.end == 0) {
        this.$Message.error('请选择合同结束日期'); return;
      }
      if (_this.formValidate.money == 0) {
        this.$Message.error('请输入合同金额'); return;
      }
      if (_this.formValidate.company == '') {
        this.$Message.error('请输入合同单位'); return;
      }
      if (_this.formValidate.remark == '') {
        this.$Message.error('请输入合同备注'); return;
      }
      if (_this.formValidate.is_notice == '1' && _this.phone_selecte.length == 0) {
        this.$Message.error('请选择手机号'); return;
      }
      if (_this.formValidate.is_notice == '1') {
        _this.formValidate.phones = _this.phone_selecte.join(',')
      } else {
        _this.formValidate.phones = ''
      }
      editContract(_this.formValidate).then(res => {
        if (res.code == 0) {
          _this.$Message.success('操作成功');
          _this.show_add = false
          _this.contractList()
        } else {
          _this.$Message.error(res.text); return;
        }
      })
    },
    handleFormatError (file) { },
    handleBeforeUpload (file) { },
    handleProgress (event, file) { },
    handleSuccess (event, file, fileList) {
      this.formValidate.file = file.response.domain + file.response.key
    },
    handleError (event, file) { },
    async init () {
      let qiniu = await getQiniu();
      this.upload_token = qiniu.token
      this.qiniu_url = qiniu.url
    },
    contractList () {
      let _this = this
      contractList(_this.filter).then(res => {
        _this.list = res.data
        _this.pagenation.currentPage = parseInt(res.currentPage) + 1
        _this.pagenation.totalPage = parseInt(res.totalPage)
        _this.pagenation.perPage = parseInt(res.perPage)
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter.page = 0
      _this.filter.page_size = 1000
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      contractList(this.filter).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter.page++
            _this.export()
          } else {
            _this.filter.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['序号', '合同名称', '合同附件', '合同描述', '开始日期', '结束日期', '合同金额', '合同单位', '合同备注', '创建日期', '更新日期'];
            const filterVal = ['id', 'name', 'file', 'desc', 'date_start', 'date_end', 'money', 'company', 'remark', 'created_time', 'updated_time'];
            const data = _this.formatJson(filterVal, _this.export_list)
            export_json_to_excel(tHeader, data, '合同')
          }
        }
      })
    },
  },
  mounted () {
    this.init()
    this.contractList()
    getAdminPhoneList().then(res => {
      this.phone_list = res.data
    })
  },
}
</script>
<style lang="less">
@page {
	margin-top: 1mm; //去掉页眉
	margin-bottom: 1mm; //去掉页脚
}
.left {
	width: 100%;
	//padding-left: 50px;
	p {
		color: #333;
		font-size: 14px;
		margin-bottom: 10px;
		line-height: 28px;
	}
}
</style>
